<template>
	<view>
		<!-- <iframe style="width: 100%;height: 400rpx;" src="//player.bilibili.com/player.html?aid=543137327&bvid=BV1Qi4y157az&cid=267710554&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
		<block v-if="list.length>0" v-for="(item,index) in list" :key="index">
			<view class="cu-card case" @click="openDetail(item._id)">
				<view class="cu-item shadow">
					<view class="image">
						<image :src="item.cover" mode="widthFix"></image>
						<view v-if="item.tags&&item.tags.length>0" class="cu-tag bg-blue">{{item.tags[0]?item.tags[0]:'最新'}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.name}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-if="item.author">
							<view class="cu-avatar round lg" :style="'background-image:url('+item.author.avatar+');'"></view>
							<view class="flex flex-direction content " style="align-items: flex-start;justify-content:flex-start;">
								<view class="text-grey">{{item.author.name}}</view>
								<view class="text-gray text-sm flex">
									{{item.author.date}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="my-2 padding-lr">
			<view @click="clear" class="w-100 text-center text-grey">
				{{loadtext}}
			</view>
		</view>
		<view class="flex  align-center justify-center" style="width: 100rpx;height: 100rpx;position: fixed;bottom: 100rpx;right:30rpx;"
		 @click="show=true">
			<button class="cu-btn cuIcon">
				<text class="cuIcon-roundaddfill text-olive" style="font-size: 70rpx;"></text></button>
		</view>
		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请输入密码</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input placeholder="请输入密码-ggb专用" v-model="password"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green " @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	// import source from '@/source/data.js'
	export default {
		data() {
			return {
				list: [],
				show: false,
				password: '',
				limit: 10,
				page: 0,
				loadtext: "上拉加载更多",
			}
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {
			this.loadtext="上拉加载更多"
			this.page=0
			this.getData()
		},
		onShow() {
			this.initShare()
		},
		onReachBottom() {
			this.page++
			this.getData()
		},
		methods: {
			getData() {
				if (this.loadtext === '没有更多数据啦' || this.loadtext === "暂无数据") {
					return this.page--
				}
				this.loadtext = "加载中..."
				db.collection('vlog')
					.skip(this.page * this.limit)
					.orderBy('_id desc')
					.limit(this.limit)
					.get()
					.then(res => {
						
						uni.stopPullDownRefresh()
						uni.hideLoading()
						// 处理逻辑
						if (res.success) {
							let list = res.result.data
							this.list = this.page === 0 ? list : [...this.list, ...list],
							this.initShare()
							if (list.length === 0 && this.page === 0) {
								return this.loadtext = "暂无数据"
							}
							if (list.length < this.limit) {
								return this.loadtext = "没有更多数据啦"
							}
							if (list.length === this.limit && this.page >= 0) {
								return this.loadtext = "上拉加载更多"
							}
						} else {
							uni.showToast({
								title: '系统升级',
								icon: 'none'
							});
						}
					}).catch(err=>{
						uni.stopPullDownRefresh()
						uni.hideLoading()
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					})
			},
			confirmModal() {
				// 验证密码
				this.show=false
				uniCloud.callFunction({
					name: 'checkPassword',
					data: this.password
				}).then(res => {
					this.password=""
					if (res.result.data) {
						uni.navigateTo({
							url: '../publish/publish'
						})
					} else {
						uni.showToast({
							title: res.result.msg,
							icon: 'none'
						});
					}
				})
			},
			hideModal() {
				this.show = false
			},
			initShare(data) {
				if (this.$jwx && this.$jwx.isWechat()&&this.list.length) {
					this.$jwx.initJssdk({
						title: '你的代码我的心',
						desc: '爱生活，爱运动，爱自己！走过的路，走过的地方，都是属于我的风景。',
						type: 'link',
						imgUrl: this.list[0].cover,
						dataUrl: ''
					})
				}
			},
			
			openDetail(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
